<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 ui-mobile-rendering" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8 ui-mobile-rendering" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9 ui-mobile-rendering" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js ui-mobile-rendering" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">

    <!-- Use the .htaccess and remove these lines to avoid edge case issues.
         More info: h5bp.com/i/378 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Backbone-Require Boilerplate</title>
    <meta name="description" content="Backbone.js and Require.js Boilerplate Library">

    <!-- Mobile viewport optimized: h5bp.com/viewport -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">

    <!--Detect if the browser is a mobile browser or a desktop browser and conditionally include your JavaScript -->
    <script>

        // Mobile/Desktop Detection script
        (function(ua, w, d, undefined) {

            // App Environment
            // ---------------
            //  Tip: Set to true to turn on "production" mode
            var production = false,
                filesToLoad,
                //BoilerplateMVC Helper Methods
                boilerplateMVC = {
                    loadCSS: function(url, callback) {
                        var link = d.createElement("link");
                        link.type = "text/css";
                        link.rel = "stylesheet";
                        link.href = url;
                        d.getElementsByTagName("head")[0].appendChild(link);
                        if(callback) {
                            callback();
                        }
                    },
                    loadJS: function(file, callback) {
                        var script = d.createElement("script");
                        script.type = "text/javascript";
                        if (script.readyState) {  // IE
                            script.onreadystatechange = function() {
                                if (script.readyState == "loaded" || script.readyState == "complete") {
                                    script.onreadystatechange = null;
                                    callback();
                                }
                            };
                        } else {  // Other Browsers
                            script.onload = function() {
                                callback();
                            };
                        }
                        if(((typeof file).toLowerCase()) === "object" && file["data-main"] !== undefined) {
                            script.setAttribute("data-main", file["data-main"]);
                            script.async = true;
                            script.src = file.src;
                        } else {
                            script.src = file;
                        }
                        d.getElementsByTagName("head")[0].appendChild(script);
                    },
                    loadFiles: function(production, obj, callback) {
                        var self = this;
                        if(production) {
                            // Loads the production CSS file(s)
                            self.loadCSS(obj["prod-css"], function() {
                                // If there are production JavaScript files to load
                                if(obj["prod-js"]) {
                                    // Loads the correct initialization file (which includes Almond.js)
                                    self.loadJS(obj["prod-js"], callback);
                                }
                            });
                        } else {
                            // Loads the development CSS file(s)
                            self.loadCSS(obj["dev-css"], function() {
                                // If there are development Javascript files to load
                                if(obj["dev-js"]) {
                                    // Loads Require.js and tells Require.js to find the correct intialization file
                                    self.loadJS(obj["dev-js"], callback);
                                }
                            });
                        }
                    }
                };

            // Mobile/Tablet Logic
            if((/iPhone|iPod|iPad|Android|BlackBerry|Opera Mini|IEMobile/).test(ua)) {

                // Mobile/Tablet CSS and JavaScript files to load
                filesToLoad = {
                    // CSS file that is loaded when in development mode
                    "dev-css": "public/css/mobile.css",
                    // CSS file that is loaded when in production mode
                    "prod-css": "public/css/mobile.min.css",
                    // Require.js configuration file that is loaded when in development mode
                    "dev-js": { "data-main": "public/js/app/config/config.js", "src": "public/js/libs/require.js" },
                    // JavaScript initialization file that is also loaded when in development mode
                    "dev-init": "public/js/app/init/MobileInit.js",
                    // JavaScript file that is loaded when in production mode
                    "prod-js": "public/js/app/init/MobileInit.min.js",
                };

            }

            // Desktop Logic
            else {

                // Desktop CSS and JavaScript files to load
                filesToLoad = {
                    // CSS file that is loaded when in development mode
                    "dev-css": "public/css/desktop.css",
                    // CSS file that is loaded when in production mode
                    "prod-css": "public/css/desktop.min.css",
                    // Require.js configuration file that is also loaded when in development mode
                    "dev-js": { "data-main": "public/js/app/config/config.js", "src": "public/js/libs/require.js" },
                    // JavaScript initialization file that is loaded when in development mode
                    "dev-init": "public/js/app/init/DesktopInit.js",
                    // JavaScript file that is loaded when in production mode
                    "prod-js": "public/js/app/init/DesktopInit.min.js"
                };

            }

            boilerplateMVC.loadFiles(production, filesToLoad, function() {
                if(!production && window.require) {
                    require([filesToLoad["dev-init"]]);
                }
            });

        })(navigator.userAgent || navigator.vendor || window.opera, window, document);

    </script>

</head>
<body class="sticky-header">

<section>
    <!-- sidebar left start-->
    <div class="sidebar-left">
        <!--responsive view logo start-->
        <div class="logo dark-logo-bg visible-xs-* visible-sm-*">
            <a href="index.html">
                <!--<img src="public/lib/theme/img/logo-icon.png" alt="">-->
                <!--<i class="fa fa-maxcdn"></i>-->
                <span class="brand-name">OurNews</span>
            </a>
        </div>
        <!--responsive view logo end-->

        <div class="sidebar-left-info">
            <!-- visible small devices start-->
            <div class=" search-field">  </div>
            <!-- visible small devices end-->

            <!--sidebar nav start-->
            <ul class="nav nav-pills nav-stacked side-navigation">
                <li>
                    <h3 class="navigation-title">Navigation</h3>
                </li>
                <li><a name="personalPage" href="#"><i class="fa fa-home"></i> <span>个人主页</span></a></li>
                <li class="menu-list">
                    <a href=""><i class="fa fa-laptop"></i>  <span>新闻</span></a>
                    <ul class="child-list">
                        <li><a name="homepage" href="#homepage"> 新闻首页 </a></li>
                        <li><a href="#headlinesNews">今日头条</a></li>
                        <li><a href="#homepage">科技</a></li>
                        <li><a href="#homepage">社会</a></li>
                        <li><a href="#homepage">娱乐</a></li>
                        <li><a href="#homepage">游戏</a></li>
                        <li><a href="#homepage">ACG</a></li>
                    </ul>
                </li>

            </ul>
            <!--sidebar nav end-->

            <!--sidebar widget start-->
            <!--<div class="sidebar-widget">-->
                <!--<h4>Server Status</h4>-->
                <!--<ul class="list-group">-->
                    <!--<li>-->
                        <!--<span class="label label-danger pull-right">33%</span>-->
                        <!--<p>CPU Used</p>-->
                        <!--<div class="progress progress-xs">-->
                            <!--<div class="progress-bar progress-bar-danger" style="width: 33%;">-->
                                <!--<span class="sr-only">33%</span>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</li>-->
                    <!--<li>-->
                        <!--<span class="label label-warning pull-right">65%</span>-->
                        <!--<p>Bandwidth</p>-->
                        <!--<div class="progress progress-xs">-->
                            <!--<div class="progress-bar progress-bar-warning" style="width: 65%;">-->
                                <!--<span class="sr-only">65%</span>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</li>-->
                    <!--<li><a href="javascript:;" class="btn btn-success btn-sm ">View Details</a></li>-->
                <!--</ul>-->
            <!--</div>-->
            <!--sidebar widget end-->

        </div>
    </div>

    <!-- sidebar left end-->

    <!-- body content start-->
    <div class="body-content" >

        <!--&lt;!&ndash; header section start&ndash;&gt;-->
        <div class="header-section">

        </div>

        <!--&lt;!&ndash; header section end&ndash;&gt;-->

        <div id="main-section">

        </div>
        <!--footer section start-->
        <!--<footer>-->
            <!--2015 &copy; SlickLab by VectorLab.-->
        <!--</footer>-->
        <!--footer section end-->


    </div>
    <!-- body content end-->
</section>
</body>
</html>